<template>
  <div class="hello">
    <form action="##" @submit.prevent="showDiv">
      用户名：
      <input type="text" name="username" v-model="username" />
      <br />
      密码：
      <input type="password" name="password" id="" v-model="password" />
      <br />
      性别：
      <input type="radio" name="gender" id="" v-model="gender" value="男" />男 <input type="radio" name="gender" id="" v-model="gender" value="女" />女
      <br />
      爱好：
      <input type="checkbox" name="hobby" id="" value="吃" v-model="hobby" />吃 <input type="checkbox" name="hobby" id="" value="玩" v-model="hobby" />玩
      <input type="checkbox" name="hobby" id="" value="睡觉" v-model="hobby" />睡觉
      <input type="checkbox" name="hobby" id="" value="唱歌" v-model="hobby" />唱歌<br />
      <input type="reset" value="重置" />
      <input type="submit" value="提交" />
    </form>
    <div class="show" v-if="isShow">
      填写表单内容如下：<br />
      用户名：{{ username }}<br />
      密码：{{ password }}<br />
      性别：{{ gender }}<br />
      爱好：{{ hobby.join(',') }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      username: '',
      password: '',
      gender: '',
      hobby: [],
      isShow: false
    }
  },
  methods: {
    showDiv() {
      this.isShow = true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
